<template>
  <div class="search-wrapper">
    <div>
      <a-row :gutter="56">
        <slot></slot>
        <buttonBox
          :style="advanced ? { float: 'right' } : {}"
          @toggleAdvanced="toggleAdvanced"
          @query="query"
          @reset="reset"
        >
        </buttonBox>
      </a-row>
    </div>
  </div>
</template>
<script>
  const Item = {
    name: 'SearchListItem',
    props: {
      label: {
        type: String,
        default: '',
        required: false,
      },
    },
    inject: {
      col: {
        type: Number,
      },
    },
    render() {
      return (
        <a-col class="item-box" {...{ props: responsive[this.col] }}>
          <div class="y-search-item">
            <div class="y-search-label">{this.$props.label}</div>
            <div class="y-search-content">{this.$slots.default}</div>
          </div>
        </a-col>
      )
    },
  }
  const buttonBox = {
    name: 'buttonBox',
    data() {
      return {
        advanced: false,
      }
    },
    inject: {
      col: {
        type: Number,
      },
    },
    methods: {
      toggleAdvanced() {
        this.advanced = !this.advanced
        this.$emit('toggleAdvanced')
      },
      query() {
        this.$emit('query')
      },
      reset() {
        this.$emit('reset')
      },
    },
    render() {
      return (
        <a-col {...{ props: responsive[this.col] }}>
          <span class="table-page-search-submitButtons" style="float: 'left', overflow: 'hidden'">
            <a-button type="primary" onClick={this.query}>
              查询
            </a-button>
            <a-button style="margin-left: 8px" onClick={this.reset}>
              重置
            </a-button>
            <a id="advance-btn" style="margin-left: 8px" onClick={this.toggleAdvanced}>
              {this.advanced ? '收起' : '展开'}
              <a-icon {...{ props: { type: this.advanced ? 'up' : 'down' } }} />
            </a>
          </span>
        </a-col>
      )
    },
  }
  const responsive = {
    1: { xs: 24 },
    2: { xs: 24, sm: 12 },
    3: { xs: 24, sm: 12, md: 8 },
    4: { md: 24, lg: 12, xl: 8, xxl: 6 },
  }
  export default {
    name: 'SearchForm',
    Item: Item,
    components: { buttonBox },
    props: {
      col: {
        type: Number,
        required: false,
        default: 4,
      },
    },
    provide() {
      return {
        col: this.col > 4 ? 4 : this.col,
      }
    },
    data() {
      return {
        advanced: false,
        toplist: [],
        bottomList: [],
      }
    },
    methods: {
      toggleAdvanced() {
        this.advanced = !this.advanced
        this.displayItem()
      },
      query() {
        this.$emit('query')
      },
      reset() {
        this.$emit('reset')
      },
      displayItem() {
        let itemArr = this.$slots.default

        let displayNum = this.col
        // 计算出slot的个数
        let l = itemArr.length
        if (l < displayNum) {
          document.getElementById('advance-btn').style.display = 'none'
          return
        }
        for (let i = displayNum - 1; i < l; i++) {
          itemArr[i].elm.style.display = this.advanced ? '' : 'none'
        }
      },
    },
    mounted() {
      this.displayItem()
    },
  }
</script>
<style scoped lang="less">
  .search-wrapper {
    padding-bottom: 8px;
  }
  /deep/ .item-box {
    margin-bottom: 16px;
  }
  /deep/ .y-search-item {
    display: flex;
    margin-right: 0;
  }
  /deep/ .y-search-content {
    flex: 1 1;
    display: inline-block;
    vertical-align: middle;
    height: 32px;
    line-height: 32px;
  }

  /deep/ .y-search-label {
    min-width: 80px;
    line-height: 32px;
    padding-right: 8px;
    width: auto;
  }
  .table-page-searcy-submitButtons {
    display: block;
    white-space: nowrap;
  }
</style>
